<template>
<!-- <div :class="`preferenceItems-box-style bg-color${tabsShowIndex}`"> 
        <div class="header-box-style"> 
            <van-row>  
                <van-col :span="index+1==5?4:5" class="tabs-style" v-for="(item,index) in tabsData" :key="index" @click="tabsClick(item, index)">
                    <span :class="tabsShow == item.dgname?`span-active-style${index+1}`:''">{{item.dgname}}</span>
                </van-col> 
            </van-row>
        </div>
        <div :class="`content content${tabsShowIndex}`">
            <van-row>  
                <van-col span="6" class="img-box-style" v-for="(item,index) in listData" :key="index"  @click="tagsAddClick(item)">
                    <Badge :content="index <= 2 ? 'HOT':''" class="img-tabs-tags-style">
                        <VanImage
                            round
                            :class="projectListId.indexOf(item.tb_client_demand_id) != -1 ? 'tabs-content-img-style tabs-content-img-style-active':'tabs-content-img-style'" 
                            :src="item.img_path"
                        />
                    </Badge>
                    <span :class="projectListId.indexOf(item.tb_client_demand_id) != -1 ? 'tabs-content-span-style tabs-content-span-style-active':'tabs-content-span-style' ">{{item.name}}</span>
                </van-col> 
            </van-row>
        </div>
        <div class="footer-box-style">
            <span class="title">选择你偏好项目</span>
            <ul>
                <Badge :content="index == '0' ? '主':''" v-for="(item, index) in projectList" :key="index">
                    <li> 
                        {{item.name}}  
                        <van-icon name="close" class="icon" @click="tagsRemoveClick(item)" />
                    </li> 
                </Badge>
            </ul>
        </div>
        <div class="btn-big-box">
            <div class="btn-box-style">
                <van-button class="btn1">返回</van-button>
                <van-button class="btn2" @click="submitClick()">确认偏好项目</van-button>
            </div>
        </div>

    </div> -->

<div class="preferenceItems-box-style">
    <IndexBar :index-list="indexList" class="tags-big-box" :style="{height: boxHeight}">
        <div v-for="(item,index) in tabsData" :key="index">
            <IndexAnchor :index="index">{{item.dgname}}</IndexAnchor>
            <div class="tags-box-style">
                <span v-for="(elem,elemIndex) in item.sub_data" :key="elemIndex" @click="tagsAddClick(elem)" :class="projectListId.indexOf(elem.tb_client_demand_id) != -1 ? 'tags-box-tags-active':'' ">{{elem.name}}</span>
            </div>
        </div>

    </IndexBar>
    <div class="small-btn-box">

        <div class="footer-box-style">
            <span class="title">选择预约项目</span>
            <ul>
                <Badge :content="index == '0' ? '主':''" v-for="(item, index) in projectList" :key="index">
                    <li>
                        {{item.name}}
                        <van-icon name="close" class="icon" @click="tagsRemoveClick(item)" />
                    </li>
                </Badge>
            </ul>
        </div>

        <van-button type="info" block @click="submitClick()" class="btn2">确认预约项目</van-button>

    </div>

    <float-icons padding="10 0 60 0" class="icons-warp">
        <div class="float-icon-item">
            <img src="../../assets/dargIcon/back.png" alt="" @click="handleIcons('/home')" />
            <span>返回</span>
        </div>
        <!-- <div class="float-icon-item">
            <img src="../../assets/dargIcon/cart-icon.png" alt="" @click="handleIcons('/cart')" />
            <span>购物车</span>
        </div> -->
    </float-icons>

</div>
</template>

<script>
import {
    Search,
    SwipeCell,
    Field,
    Badge,
    Toast,
    Image as VanImage,
    Dialog,
    IndexAnchor,
    IndexBar
} from 'vant';

import FloatIcons from '@/components/s-icons'
import {
    getDeptSchedulerInfo
} from '../../sgApi/index'
import {
    isbind
} from "../isCheckBind.js"

export default {
    components: {
        FloatIcons,
        Search,
        SwipeCell,
        Field,
        VanImage,
        Badge,
        IndexAnchor,
        IndexBar
    },
    name: "preferenceItems",
    data() {
        return {
            boxHeight: '100px',
            tabsShow: '整形中心',
            tabsData: [{
                    dgname: '整形中心',
                    id: 1
                },
                {
                    dgname: '无创美容',
                    id: 2
                },
                {
                    dgname: '皮肤美容',
                    id: 3
                },
                {
                    dgname: '植发中心',
                    id: 4
                },
                {
                    dgname: '其他',
                    id: 5
                },
            ],
            listData: [],

            projectList: [],

            projectListId: [],
            tabsShowIndex: 1,

            // xin
            indexList: [],

        }
    },
    mounted() {
        let ios = navigator.userAgent.indexOf('iphone');
        let _this = this;
        document.body.addEventListener('touchstart', _this.touchstartFunction, {
            passive: false
        });
        if (ios === -1) {
            let el = document.querySelector('.tags-big-box');
            iosTrouchFn(el);
        }

        function iosTrouchFn(el) {
            el.addEventListener('touchmove', function (e) {
                e.isSCROLL = true;
            });
            document.body.addEventListener('touchmove', _this.touchmoveFunction, {
                passive: false
            });
        }
    },
    distoryed() {
        document.body.removeEventListener('touchstart', this.touchstartFunction, {
            passive: false
        });
        document.body.removeEventListener('touchmove', this.touchmoveFunction, {
            passive: false
        });
    },
    created() {
        isbind()
        getDeptSchedulerInfo().then(res => {
            if (res.code == 0) {

                this.tabsData = res.data
                this.tabsShow = res.data.length && (res.data[0].dgname)
                this.listData = res.data.length && (res.data[0].sub_data)
            } else {
                Toast.fail(res.msg)
            }
        })

        let preferenceInfo = localStorage.getItem("preferenceInfo") ? JSON.parse(localStorage.getItem("preferenceInfo")) : null

        if (preferenceInfo) {
            let projectData = preferenceInfo
            this.projectList = projectData

            let arr = []
            this.projectList.forEach(item => {
                arr.push(item.tb_client_demand_id)
            })
            this.projectListId = [...arr]
        }

        // document.body.addEventListener("touchmove", window.scroll, {
        //     passive: false
        // });
        // document.body.style.overflow = 'hidden';

        setTimeout(() => {
            this.heightFuc()
        }, 100);

    },
    methods: {
        touchstartFunction(e) {
            this.startY = e.touches[0].pageY;
        },
        touchmoveFunction(e) {
            let el = document.querySelector('.tags-big-box');
            if (!e.isSCROLL) {
                e.preventDefault();
            } else {
                let moveY = e.touches[0].pageY;
                let top = el.scrollTop;
                let ch = el.clientHeight;
                let scrollH = el.scrollHeight;
                if ((top === 0 && moveY > this.startY) || (top + ch === scrollH && moveY < this.startY)) {
                    e.preventDefault();
                }
            }
        },
        heightFuc() {
            console.log(document.querySelectorAll('.small-btn-box')[0].offsetHeight)
            let smallBoxHeight = document.querySelectorAll('.small-btn-box')[0].offsetHeight
            this.boxHeight = `calc(100vh - ${smallBoxHeight}px)`
        },

        handleIcons(id) {
            this.$router.replace({
                path: "/noninvasive"
            })
        },
        tabsClick(item, index) {
            this.tabsShow = item.dgname
            this.tabsShowIndex = index + 1

            let newData = this.tabsData.find(elem => {
                return elem.dept_id == item.dept_id
            })
            console.log(newData)
            this.listData = [...newData.sub_data]
        },

        // 获取当前的日期
        getCurrentTime() {
            //获取当前时间并打印
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            _this.gettime = yy + '-' + mm + '-' + dd;
        },
        tagsAddClick(item) {
            let bool = this.projectList.find(elem => {
                return elem.tb_client_demand_id == item.tb_client_demand_id
            })
            if (bool) {
                let newData = this.projectList.filter(elemt => {
                    return elemt.tb_client_demand_id != item.tb_client_demand_id
                })
                let newDataId = this.projectListId.filter(elemt => {
                    return elemt != item.tb_client_demand_id
                })
                this.projectList = [...newData]
                this.projectListId = [...newDataId]
            } else {
                if (this.projectList.length < 3) {
                    this.projectList = [...this.projectList, item]
                    this.projectListId.push(item.tb_client_demand_id)
                } else {
                    Toast.fail('最多选择三项项目')
                }
            }

            this.$nextTick(() => {

                this.heightFuc()

            })

        },

        tagsRemoveClick(item) {
            let newData = this.projectList.filter(elem => {
                return elem.tb_client_demand_id != item.tb_client_demand_id
            })
            let newDataId = this.projectListId.filter(elemt => {
                return elemt != item.tb_client_demand_id
            })
            this.projectList = [...newData]
            this.projectListId = [...newDataId]

            this.$nextTick(() => {

                this.heightFuc()

            })

        },

        submitClick() {
            if (this.projectList.length < 1) {
                Toast.fail('请先选择项目');
                return
            };
            Dialog.confirm({
                title: '提示',
                message: `确认预约项目`,
            }).then(() => {
                localStorage.setItem("preferenceInfo", JSON.stringify(this.projectList).toString())
                this.$router.replace({
                    path: '/submitPreference',
                    // query:{
                    //     project: JSON.stringify(this.projectList).toString()
                    // }
                })
            }).catch(() => {
                console.log('err')
            });
        }

    }

}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
